<template>
  <a-modal
    title="计划类型配置"
    :width="modalWidth"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="close"
    cancelText="关闭">
    <div class="card-container">
      <a-card key="4" title="计划类型" :head-style="headStyle" :body-style="bodyStyle">
        <a-radio-group v-model="result.day.cronEvery">
          <!--<a-row style="margin-bottom: 20px;">
            <a-radio value="0">临时</a-radio>
          </a-row>-->
          <a-row style="margin-bottom: 20px;">
            <a-radio value="1">每日</a-radio>
          </a-row>
          <a-row style="margin-bottom: 20px;">
            <a-radio class="long" value="4">每周</a-radio>
            <a-select style="width:354px;" size="small" mode="multiple" v-model="result.week.specificSpecific">
              <a-select-option v-for="(val,index) in Array(7)" :key="index" :value="index+1">{{ weekDays[index] }}
              </a-select-option>
            </a-select>
          </a-row>
          <a-row style="margin-bottom: 20px;">
            <a-radio class="long" value="5">每月</a-radio>
            <a-select style="width:354px;" size="small" mode="multiple" v-model="result.day.specificSpecific">
              <a-select-option v-for="(val,index) in Array(31)" :key="index" :value="index+1">{{ index+1 }}
              </a-select-option>
            </a-select>
          </a-row>
        </a-radio-group>
      </a-card>
      <div class="bottom">
        <span class="value">{{this.cron }}</span>
      </div>
    </div>
  </a-modal>
</template>
<script>
  export default {
    name: 'VueCron',
    props: ['data'],
    data() {
      return {
        visible: false,
        confirmLoading: false,
        size: 'large',
        weekDays: ['天', '一', '二', '三', '四', '五', '六'].map(val => '星期' + val),
        result: {
          day: {},
          week: {},
        },
        bodyStyle: {'margin-bottom': '0px'},
        headStyle: {'font-weight': 'bold', 'text-align': 'center', 'background-color': '#1890ff', 'color': '#FFF'},
        defaultValue: {
          day: {
            cronEvery: '',
            incrementStart: 1,
            incrementIncrement: '1',
            rangeStart: '',
            rangeEnd: '',
            specificSpecific: [],
            cronLastSpecificDomDay: 1,
            cronDaysBeforeEomMinus: 1,
            cronDaysNearestWeekday: 1,
          },
          week: {
            cronEvery: '',
            incrementStart: 1,
            incrementIncrement: 1,
            specificSpecific: [],
            cronNthDayDay: 1,
            cronNthDayNth: 1,
          },
          label: ''
        },
        //计划类型
        type: 0,
      }
    },
    computed: {
      modalWidth() {
        return 608;
      },
      daysText() {
        let days = '';
        let cronEvery = this.result.day.cronEvery || '';
        switch (cronEvery.toString()) {
          case '0':
            days= '-';
            break;
          case '1':
            break;
          case '2':
          case '4':
          case '11':
            days = '?';
            break;
          case '3':
            days = this.result.day.incrementStart + '/' + this.result.day.incrementIncrement;
            break;
          case '5':
            this.result.day.specificSpecific.map(val => {
              days += val + ','
            });
            days = days.slice(0, -1);
            break;
          case '6':
            days = "L";
            break;
          case '7':
            days = "LW";
            break;
          case '8':
            days = this.result.day.cronLastSpecificDomDay + 'L';
            break;
          case '9':
            days = 'L-' + this.result.day.cronDaysBeforeEomMinus;
            break;
          case '10':
            days = this.result.day.cronDaysNearestWeekday + "W";
            break
        }
        return days;
      },
      weeksText() {
        let weeks = '';
        let cronEvery = this.result.day.cronEvery || '';
        switch (cronEvery.toString()) {
          case '0':
            weeks= '-';
            break;
          case '1':
          case '3':
          case '5':
            weeks = '?';
            break;
          case '2':
            weeks = this.result.week.incrementStart + '/' + this.result.week.incrementIncrement;
            break;
          case '4':
            this.result.week.specificSpecific.map(val => {
              weeks += val + ','
            });
            weeks = weeks.slice(0, -1);
            break;
          case '6':
          case '7':
          case '8':
          case '9':
          case '10':
            weeks = "?";
            break;
          case '11':
            weeks = this.result.week.cronNthDayDay + "#" + this.result.week.cronNthDayNth;
            break;
        }
        return weeks;
      },
      cron() {
        return `${this.daysText || '*'} ${this.weeksText || '?'}`
      },
    },
    watch: {
      visible: {
        handler() {
          // if(this.data){
          //   //this. result = Object.keys(this.data.value).length>0?this.deepCopy(this.data.value):this.deepCopy(this.defaultValue);
          //   //this.result = Object.keys(this.data.value).length>0?clone(this.data.value):clone(this.defaultValue);
          //   //this.result = Object.keys(this.data.value).length>0?clone(JSON.parse(this.data.value)):clone(this.defaultValue);
          //   this.result = Object.keys(this.data.value).length>0?JSON.parse(this.data.value):JSON.parse(JSON.stringify(this.defaultValue));
          // }else{
          //   //this.result = this.deepCopy(this.defaultValue);
          //   //this.result = clone(this.defaultValue);
          //   this.result = JSON.parse(JSON.stringify(this.defaultValue));
          // }
          let label = this.data;
          if (label) {
            this.daysReverseExp(label);
            JSON.parse(JSON.stringify(label));
          } else {
            this.result = JSON.parse(JSON.stringify(this.defaultValue));
          }
        }
      }
    },
    methods: {
      show() {
        this.visible = true;
        // console.log('secondsReverseExp',this.secondsReverseExp(this.data));
        // console.log('minutesReverseExp',this.minutesReverseExp(this.data));
        // console.log('hoursReverseExp',this.hoursReverseExp(this.data));
        // console.log('daysReverseExp',this.daysReverseExp(this.data));
        // console.log('monthsReverseExp',this.monthsReverseExp(this.data));
        // console.log('yearReverseExp',this.yearReverseExp(this.data));

      },
      handleSubmit() {
        this.daysReverseExp(this.cron);
        this.$emit('ok',this.cron,this.type);
        this.close();
        this.visible = false;
      },
      close() {
        this.visible = false;
      },
      daysReverseExp(cron) {
        function sortNum(a, b) {
          return a - b;//升序排序
          //return b - a;//降序排序
        }
        let days = cron.split(" ")[0];
        let weeks = cron.split(" ")[1];
        let day = {
          cronEvery: '',
          incrementStart: 1,
          incrementIncrement: 1,
          rangeStart: 1,
          rangeEnd: 1,
          specificSpecific: [],
          cronLastSpecificDomDay: 1,
          cronDaysBeforeEomMinus: 1,
          cronDaysNearestWeekday: 1,
        };
        let week = {
          cronEvery: '',
          incrementStart: 1,
          incrementIncrement: 1,
          specificSpecific: [],
          cronNthDayDay: 1,
          cronNthDayNth: '1',
        };
        if(cron=='- -'){
          this.type=0;
          day.cronEvery = '0';
        }else if (!days.includes('?')) {
          switch (true) {
            case days.includes('*'):
              day.cronEvery = '1';
              break;
            case days.includes('?'):
              // 2、4、11
              break;
            case days.includes(','):
              day.cronEvery = '5';
              day.specificSpecific = days.split(',').map(Number).sort(sortNum);
              // day.specificSpecific.forEach(function (value, index) {
              //   day.specificSpecific[index] = value -1;
              // });
              break;
            default:
              day.cronEvery = '5';
              day.specificSpecific = days.split(',');
          }
          this.type=3;
        } else if(!weeks.includes('?')){
          switch (true) {
            case weeks.includes('/'):
              day.cronEvery = '2';
              week.incrementStart = weeks.split("/")[0];
              week.incrementIncrement = weeks.split("/")[1];
              break;
            case weeks.includes(','):
              day.cronEvery = '4';
              week.specificSpecific = weeks.split(',').map(Number).sort(sortNum);
              break;
            default:
              day.cronEvery = '4';
              week.specificSpecific=weeks.split(',');
          }
          this.type=2;
        }else if(cron=='* ?'){
          this.type=1;
          day.cronEvery = '1';
        }
        this.result.day = day;
        this.result.week = week;
      },
    }
  }
</script>

<style lang="less">
  .card-container {
    background: #fff;
    overflow: hidden;
    padding: 12px;
    position: relative;
    width: 100%;
    .ant-tabs {
      border: 1px solid #e6ebf5;
      padding: 0;
      .ant-tabs-bar {
        margin: 0;
        outline: none;
        border-bottom: none;
        .ant-tabs-nav-container {
          margin: 0;
          .ant-tabs-tab {
            padding: 0 24px !important;
            background-color: #f5f7fa !important;
            margin-right: 0px !important;
            border-radius: 0;
            line-height: 38px;
            border: 1px solid transparent !important;
            border-bottom: 1px solid #e6ebf5 !important;
          }
          .ant-tabs-tab-active.ant-tabs-tab {
            color: #409eff;
            background-color: #fff !important;
            border-right: 1px solid #e6ebf5 !important;
            border-left: 1px solid #e6ebf5 !important;
            border-bottom: 1px solid #fff !important;
            font-weight: normal;
            transition: none !important;
          }
        }
      }
      .ant-tabs-tabpane {
        padding: 15px;
        .ant-row {
          margin: 10px 0;
        }
        .ant-select, .ant-input-number {
          width: 100px;
        }
      }
    }
  }
</style>
<style lang="less" scoped>
  .container-widthEn {
    width: 755px;
  }

  .container-widthCn {
    width: 608px;
  }

  .language {
    text-align: center;
    position: absolute;
    right: 13px;
    top: 13px;
    border: 1px solid transparent;
    height: 40px;
    line-height: 38px;
    font-size: 16px;
    color: #409eff;
    z-index: 1;
    background: #f5f7fa;
    outline: none;
    width: 47px;
    border-bottom: 1px solid #e6ebf5;
    border-radius: 0;
  }

  .card-container {
    .bottom {
      display: flex;
      justify-content: center;
      padding: 10px 0 0 0;
      .cronButton {
        margin: 0 10px;
        line-height: 40px;
      }
    }
  }

  .tabBody {
    .a-row {
      margin: 10px 0;
      .long {
        .a-select {
          width: 354px;
        }
      }
      .a-input-number {
        width: 110px;
      }
    }
  }
</style>
